<template>
  <div class="all">
    <header>
      <div class="div">
        <img src="../../../assets/返回.png" @click="back()" alt="">
        <span class="solid" @click="back()">返回</span>
      </div>
      <div class="div">
        <span>立即预约</span>
      </div>
      <div class="div">
        <span class="solid" @click="Submit()" v-show="isDoctor !== 'true'">提交</span>
      </div>
    </header>
    <div class="label">
      <a class="hengGang"></a>患者描述病情
    </div>
    <div class="textBox">
      <textarea v-model="illness_desc" name="" id="" cols="30" rows="10"></textarea>
    </div>
    <ul class="ulList">
      <li >
        <span class="li_label">被服务人信息</span>
        <span class="li_input">
            <input type="text" v-model="PATIENT_NAME" readonly placeholder="请选择被服务人">
        </span>
      </li>
      <li >
        <span class="li_label">是否需要医生指导用药</span>
        <span class="li_input">
            <input type="text" v-model="doctorText" readonly placeholder="请选择是或否">
          </span>
      </li>
      <li v-show="isYoung == true">
        <span class="li_label">体重</span>
        <span class="li_input">
            <input type="text" v-model="weight" placeholder="请输入体重">
            kg
          </span>
      </li>
      <li>
        <span class="li_label">是否曾到医疗机构就诊</span>
        <span class="li_input">
            <input type="text" v-model="hospitalText"  readonly placeholder="请选择是或否">
          </span>
      </li>
    </ul>
    <button class="lookBtn" @click="LookHis()">查看患者相关资料</button>
    <div class="label">
      <a class="hengGang"></a>视频咨询预约信息
    </div>
    <ul class="ulList">
      <li @click="[isDoctor == 'true' ? isDateShow = false : isDateShow = true]">
        <span class="li_label">预约日期</span>
        <span class="li_input">
            <input type="text" v-model="TIME" readonly placeholder="请选择预约日期">
            <img src="../../../assets/下弹灰@2x.png" alt="">
          </span>
      </li>
      <li >
        <span class="li_label">预约时间段</span>
        <span class="li_input">
          <input
            @click="clickStarTime('isStartTimeShow')"
                 style="width: 100px;text-align: center"
                 type="text"
            v-model="book_time_start" readonly placeholder="预约时间段">
          至
          <input style="width: 100px;text-align: center"
                 type="text"
                 @click="clickStarTime('isEndTimeShow')"
                 v-model="book_time_end" readonly placeholder="预约时间段">
<!--                           @click="[isDoctor == 'true' ? isEndTimeShow = false : isEndTimeShow = true]"-->

          <img src="../../../assets/下弹灰@2x.png" alt="">
          </span>
      </li>
      <li >
        <span class="li_label">视频时长</span>
        <span class="li_input">
            <input type="text" v-model="doc_amount_duration"  readonly >分钟
          </span>
      </li>
    </ul>
    <div class="btnDiv" v-show="isDoctor">
      <button class="button refuse" @click="clickRefuse()">拒绝</button>
      <button class="button agree" @click="clickAgree()">同意</button>
    </div>
    <div class="label" v-show="isDoctor" style="justify-content: space-between">
      <span style="display: flex;align-items: center"><a class="hengGang"></a>拒绝理由</span>
      <span style="color: #1DA4F2">常用语</span>
    </div>
    <div class="textDiv" v-show="isDoctor">
      <textarea
        :readonly="!isDoctor"
        v-model="book_refuse_desc"
        placeholder="填写拒绝原因或者预约建议"
      >
      </textarea>
    </div>
    <van-popup round v-model="isDateShow" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="DateConfirm()"
        @cancel="isDateShow = false"
        title="选择预约日期"
      />
    </van-popup>
    <van-popup round v-model="isStartTimeShow" position="bottom">
      <van-datetime-picker
        v-model="currentStartTime"
        type="time"
        :formatter="formatter"
        title="选择预约时间"
        :min-hour="start_min"
        :min-minute="start_min_minute"
        :max-hour="20"
        @confirm="TimeStartConfirm()"
        @cancel="isStartTimeShow = false"
      />
    </van-popup>
    <van-popup round v-model="isEndTimeShow" position="bottom">
      <van-datetime-picker
        v-model="currentEndTime"
        type="time"
        :formatter="formatter"
        title="选择预约时间"
        :min-hour="end_min"
        :min-minute="end_min_minute"
        :max-hour="20"
        @confirm="TimeEndConfirm()"
        @cancel="isEndTimeShow = false"
      />
    </van-popup>
    <van-dialog v-model="agreeShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认同意此次预约吗？"
                @confirm="agreeConfirm()"
                show-cancel-button>
    </van-dialog>
    <van-dialog v-model="RefuseShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认拒绝此次预约吗？"
                @confirm="RefuseConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  name: 'TuWenYuYue',
  data () {
    return {
      isdoctorVal: '',
      weight: '',
      isHosVal: '',
      isYoung: false,
      book_date: '', // 预约日期
      book_time_start: '', // 预约时间
      book_time_end: '', // 预约时间
      doc_amount_duration: '', // 时长
      isDateShow: false,
      minDate: new Date(),
      maxDate: '',
      currentDate: new Date(),
      isStartTimeShow: false,
      id: this.$route.query.id,
      illness_desc: '',
      doctorText: '',
      hospitalText: '',
      PATIENT_NAME: '',
      TIME: '',
      currentTime: '',
      isDoctor: this.$route.query.isDoctor,
      agreeShow: false,
      RefuseShow: false,
      currentStartTime: '',
      isEndTimeShow: false,
      currentEndTime: '',
      start_min: '',
      end_min: '',
      start_min_minute: '',
      end_min_minute: '',
      book_refuse_desc: '' // 医生拒绝
    }
  },
  mounted () {
    this.maxDate = new Date(new Date().getFullYear() + 1, new Date().getMonth(), new Date().getDate())
    this.DateConfirm()
    this.getData()
    if (sessionStorage.getItem('yuyueData') !== null) {
      var data = JSON.parse(sessionStorage.getItem('yuyueData'))
      this.book_refuse_desc = data.book_refuse_desc
      this.book_date = data.book_date
    }
  },
  methods: {
    clickStarTime (data) {
      if (this.isDoctor == 'true') {
        return false
      } else if (data === 'isStartTimeShow') {
        if (this.book_date === '' || this.book_date === undefined) {
          Toast('请先选择日期')
          return false
        }
        this.isStartTimeShow = !this.isStartTimeShow
      } else if (data === 'isEndTimeShow') {
        console.log(this.book_time_start)
        if (this.book_date === '' || this.book_date === undefined) {
          Toast('请先选择日期')
          return false
        } else if (this.book_time_start === '' || this.book_time_start === undefined) {
          Toast('请先选择开始时间段')
          return false
        }
        this.isEndTimeShow = !this.isEndTimeShow
      }
    },
    // clickStarTime
    // book_date
    // book_time_start
    // book_time_end
    // @click="[isDoctor == 'true' ? isStartTimeShow = false : isStartTimeShow = true]"
    // 拒接同意
    RefuseConfirm () {
      this.RefuseShow = false
      this.$http.updateDocNot({id: this.id, book_refuse_desc: this.book_refuse_desc})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$router.history.go(-1)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 确认同意
    agreeConfirm () {
      this.agreeShow = false
      this.$http.updateDocArgee({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$router.history.go(-1)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 同意按钮
    clickAgree () {
      this.agreeShow = true
    },
    // 拒绝按钮
    clickRefuse () {
      this.RefuseShow = true
    },
    // 查看历史记录
    LookHis () {
      this.$router.push({path: '/tuWenUpload'})
    },
    // 获取数据
    getData () {
      this.$http.findOneInquiry({
        id: this.id
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.doc_amount_duration = res.data.data.doc_amount_duration
            this.illness_desc = res.data.data.illness_desc
            if (res.data.data.age < 6) {
              this.isYoung = true
            } else {
              this.isYoung = false
            }
            this.weight = res.data.data.weight
            this.PATIENT_NAME = res.data.data.PATIENT_NAME
            this.book_date = res.data.data.book_date
            this.book_time_start = res.data.data.book_time_start
            this.book_time_end = res.data.data.book_time_end
            // eslint-disable-next-line eqeqeq
            if (res.data.data.is_doc_medical == 0) {
              this.doctorText = '否'
              // eslint-disable-next-line eqeqeq
            } else if (res.data.data.is_doc_medical == 1) {
              this.doctorText = '是'
            }
            // eslint-disable-next-line eqeqeq
            if (res.data.data.is_hos_visit == 0) {
              this.hospitalText = '否'
              // eslint-disable-next-line eqeqeq
            } else if (res.data.data.is_hos_visit == 1) {
              this.hospitalText = '是'
            }
            var fileList = []
            var imgList = []
            for (var i = 0; i < res.data.data.Iimg.length; i++) {
              var file = { url: res.data.data.Iimg[i].img_url, isImage: true }
              fileList.push(file)
              imgList.push(res.data.data.Iimg[i].img_url)
            }
            var jianChaList = []
            var jianYanList = []
            // 检查
            for (var i = 0; i < res.data.data.Clist.length; i++) {
              var jc = {
                id: res.data.data.Clist[i].id,
                xiangmu: res.data.data.Clist[i].xiangmu,
                show: false,
                money: res.data.data.Clist[i].money
              }
              jianChaList.push(jc)
            }
            for (var i = 0; i < res.data.data.Jlist.length; i++) {
              var jy = {
                id: res.data.data.Jlist[i].id,
                xiangmu: res.data.data.Jlist[i].xiangmu,
                show: false,
                money: res.data.data.Jlist[i].money
              }
              jianYanList.push(jy)
            }

            var obj = {
              jianChaList: jianChaList,
              jianYanList: jianYanList,
              menuIndex: 0,
              fileList: fileList,
              imgList: imgList,
              checkmoney: null,
              inspermoney: null,
              isJYdelBtn: false,
              isJCdelBtn: false,
              maxCount: res.data.data.Iimg.length,
              disable: true,
              PATIENT_USER_ID: res.data.data.PATIENT_USER_ID
            }
            sessionStorage.setItem('tuWenData', JSON.stringify(obj))
          }
        })
        .catch(err => {
          console.log(err)
        })
      // miniinqs/findOneInquiry
      // 查询问诊详情
    },
    // 提交
    Submit () {
      this.$http.updateInquTime({
        id: this.id,
        book_date: this.book_date,
        book_time_start: this.book_time_start,
        book_time_end: this.book_time_end
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$router.history.go(-1)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 时间段开始时间 确认
    TimeStartConfirm () {
      this.isStartTimeShow = false
      this.book_time_start = this.currentStartTime
      this.end_min = this.book_time_start.split(':')[0]
      this.end_min_minute = this.book_time_start.split(':')[1]
      this.currentEndTime = this.currentStartTime
    },
    // 时间段结束时间 确认
    TimeEndConfirm () {
      this.isEndTimeShow = false
      this.book_time_end = this.currentEndTime
    },
    // 日期确认按钮
    DateConfirm (value, index) {
      this.TIME = this.formatDate(this.currentDate)
      this.book_date = this.formatDate(new Date(this.currentDate))
      if (this.formatDate(new Date(this.book_date)) === this.formatDate(new Date())) {
        this.start_min = new Date().getHours()
        this.start_min_minute = new Date().getMinutes()
        this.currentStartTime = new Date().getHours() + ':' + new Date().getMinutes()
      } else {
        this.start_min = 8
        this.start_min_minute = 0
        this.currentStartTime = new Date().getHours() + ':' + new Date().getMinutes()
      }
      this.isDateShow = false
    },
    // 转换时间
    formatDate (date) {
      var YY = date.getFullYear()
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      // var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      // var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
      return YY + '-' + MM + '-' + DD
    },
    // 返回
    back () {
      // this.$router.push({path: '/'})
      this.$router.history.go(-1)
    },
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      } else if (type === 'day') {
        return `${val}日`
      } else if (type === 'hour') {
        return `${val}点`
      } else if (type === 'minute') {
        return `${val}分`
      }
      return val
    }
  },
  destroyed () {
    var obj = {
      book_refuse_desc: this.book_refuse_desc,
      book_date: this.book_date
    }
    sessionStorage.setItem('yuyueData', JSON.stringify(obj))
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
    overflow: auto;
  }
  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
    background: white;
    position: sticky;
    top: 0;
    z-index: 9;
  }
  .div{
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    font-family: "PingFang SC";
    font-size: 15px;
    font-weight: bold;
  }
  .div img{
    margin-right: 5px;
  }
  .div:nth-child(1) img{
    height: 13px;
    width: 7px;
    margin-left: 15px;
  }
  .div:nth-child(3) img{
    margin-right: 5px;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .div:nth-child(2){
    justify-content: center;
  }
  .div:nth-child(3){
    justify-content: flex-end;
  }
  .solid{
    color: #1DA4F2;
  }
  .label{
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    background: white;
  }
  .hengGang{
    display: block;
    width: 2px;
    border-radius: 1px;
    height: 15px;
    background: #1DA4F2;
    margin-right: 5px;
  }
  .textBox{
    width: 100%;
    height: 150px;
    background: white;
    padding: 10px 0;
    box-sizing: border-box;
  }
  .textBox textarea{
    width: 95%;
    height: 100%;
    resize: none;
    border-radius: 10px;
    padding: 10px ;
    box-sizing: border-box;
    background: #FAF9FE;
    margin: 0 2%;
    border: none;
    font-size: 15px;
  }
  .ulList{
    width: 100%;
    background: white;
    padding:  0 15px;
    box-sizing: border-box;
  }
  .ulList li{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E5E5E5;
  }
  .li_label{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .li_input img{
    width: 13px;
    height: 7px;
  }
  .li_input input{
    /*width: 110px;*/
    text-align: right;
    border: none;
    font-size: 15px;
  }
  .lookBtn{
    width: 95%;
    height: 44px;
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
    border-radius: 22px;
    margin: 10px 2%;
    border: 1px solid #1DA4F2;
    color: white;
    font-size: 17px;
    font-family: "PingFang SC";
    font-weight: bold;
  }
  .btnDiv{
    width: 100%;
    height: 60px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .button{
    width: 150px;
    height: 44px;
    border-radius: 20px;
  }
  .refuse {
    background: transparent;
    border: 1px solid #1DA4F2;
    color: #1DA4F2;
  }
  .agree {
    background: #1DA4F2;
    border: 1px solid #1DA4F2;
    color: white;
  }
  .textDiv{
    width: 100%;
    background: white;
  }
  textarea{
    width: 95%;
    height: 130px;
    resize: none;
    background: #FAF9FE;
    border-radius: 10px;
    border: none;
    margin: 0 2%;
    padding: 10px;
    box-sizing: border-box;

    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
</style>
